<template>
  <div style="background:#eee;padding-top:1px;padding-bottom:20px;dislay:none">
    <div class="container">
      <div class="marginT20">
        <!-- <Breadcrumb separator=">">
          <span>当前位置：</span>
          <Breadcrumb-item href="/">首页</Breadcrumb-item>
          <Breadcrumb-item>个人中心</Breadcrumb-item>
        </Breadcrumb> -->
      </div>
      <div class="personalCenter-box">
        <div class="personalCenter-left">
          <p :class="leftMenuActive==1?'active':''" @click="goRightPage(1)">
            <b></b>
            <img v-if="leftMenuActive==1" src="../../assets/images/我的首页1.png" alt/>
            <img v-else src="../../assets/images/我的首页.png" alt/>
            <span>我的首页</span>
          </p>
          <p :class="leftMenuActive==2?'active':''" @click="goRightPage(2)">
            <b></b>
            <img v-if="leftMenuActive==2" src="../../assets/images/我的申请／发布1.png" alt />
            <img v-else src="../../assets/images/我的申请／发布.png" alt />
            <span>我的申请/发布</span>
          </p>
          <p :class="leftMenuActive==3?'active':''" @click="goRightPage(3)">
            <b></b>
            <img v-if="leftMenuActive==3" src="../../assets/images/我的收藏1.png" alt />
            <img v-else src="../../assets/images/我的收藏.png" alt />
            <span>我的收藏</span>
          </p>
          <p :class="leftMenuActive==4?'active':''" @click="goRightPage(4)">
            <b></b>
            <img v-if="leftMenuActive==4" src="../../assets/images/企业信息1.png" alt />
            <img v-else src="../../assets/images/企业信息.png" alt />
            <span>企业信息</span>
          </p>
          <p :class="leftMenuActive==5?'active':''" @click="goRightPage(5)">
            <b></b>
            <img v-if="leftMenuActive==5" src="../../assets/images/我的足迹1.png" alt />
            <img v-else src="../../assets/images/我的足迹.png" alt />
            <span>我的足迹</span>
          </p>
          <p :class="leftMenuActive==6?'active':''" @click="goRightPage(6)">
            <b></b>
            <img v-if="leftMenuActive==6" src="../../assets/images/修改密码1.png" alt />
            <img v-else src="../../assets/images/修改密码.png" alt />
            <span>修改密码</span>
          </p>
        </div>
        <div class="personalCenter-right">
            <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myHomePage",
  data() {
    return {
      // theme3: 'light'
      rightPageInd: 1
    };
  },
  methods: {
    goRightPage(data) {
      this.rightPageInd = data;
      switch (data) {
        case 1: this.$router.push('/personalCenterHome') ;break;
        case 2: this.$router.push('/personalCenterMyApplication') ;break;
        case 3: this.$router.push('/personalCenterMyCollection') ;break;
        case 4: this.$router.push('/personalCenterCompanyInformation') ;break;
        case 5: this.$router.push('/personalCenterMyFootprint') ;break;
        case 6: this.$router.push('/personalCenterChangePassword') ;break;
      }
    }
  },
  computed:{
    leftMenuActive() {
      if(this.$route.path){
        switch (this.$route.path) {
          case '/personalCenterHome': return 1 ;break;
          case '/personalCenterMyApplication': return 2 ;break;
          case '/personalCenterMyCollection': return 3 ;break;
          case '/personalCenterCompanyInformation': return 4 ;break;
          case '/personalCenterMyFootprint': return 5 ;break;
          case '/personalCenterChangePassword': return 6 ;break;
          default: return 1;
        }
      } else {
        return 1;
      }
    }
  }
};
</script>

<style>
.title{
  font-size: 22px;
  font-weight: 700;
}
.content-card{
  width: 860px;
  background: #fff;
  padding: 0 10px;
}
.check-radio{
  text-align: center;
}
.personalCenter-box {
  width: 1240px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  z-index: 1000;
  height: auto;
}
.personalCenter-left {
  padding-top: 10px;
  width: 200px;
  height: 500px;
  background: #fff;
}
.personalCenter-left p {
  height: 35px;
  margin-top: 10px;
  color: #747c8c;
}
.personalCenter-left p:hover {
  cursor: pointer;
}
.personalCenter-left p b {
  display: inline-block;
  width: 5px;
  height: 25px;
  background: #fff;
  border-radius: 0px 4px 4px 0px;
  position: relative;
  top: 8px;
}
.personalCenter-left p.active b {
  background: #00a573;
}
.personalCenter-left p.active span {
  color: #333333;
}
.personalCenter-left p img {
  margin-left: 30px;
  position: relative;
  top: 3px;
}
.personalCenter-left p span {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
}
.personalCenter-right{
    width: 1020px;
    margin-left: 20px;
    height: auto;
}
</style>